<template>
  <view class="order-list-container">
    <view class="order-item" v-for="(item, index) in orderList" :key="index">
      <view class="order-header">
        <image class="product-image" :src="item.image"></image>
        <view class="product-info">
          <view class="info-pr">
            <view class="product-name">{{item.goods.title}}</view>
            <view class="close-btn" @click="removeItem(index)">×1</view>
          </view>
          <view class="product-features">{{item.goods.subtitle}}</view>
          <view class="installation-video">
            <text class="video-label">安装视频：</text>
            <view class="video-thumbs">
              <view class="video-thumb" v-for="(thumb, thumbIndex) in item.video" :key="thumbIndex">
                <image :src="thumb" class="thumb-image"></image>
              </view>
            </view>
          </view>
		  <view>
<!-- 			    <view class="completed-ul">
              
				<view class="completed-button">订单完成</view>

				</view> -->

		  </view>
        
        </view>
      </view>
      <view class="order-footer">
		    <view class="completion-time">完成时间：{{   item.createtime}}</view>
        <view class="order-complete-btn" :class="{ 'completed': item.status === 'completed' }" @click="completeOrder(index)">订单完成</view>
      </view>
    </view>
  </view>
</template>

<script>
		import { GetsubData } from '../../api';
		import dateConverter from '@/utils/date-converter.js';
export default {
  data() {
    return {
      orderList: []
    };
  },
  onLoad() {
  	this.getlist()
  },
  methods: {
	async getlist(){
			  let res=await GetsubData({status:"finished"});
			   	console.log('页面加载完成1111',res.data.data);
			  if(res.code==1){
				  this.orderList=res.data.data;
				  this.orderList.forEach((item,index)=>{
					  item.createtime=dateConverter.toYMD(item.createtime)
				  })
				 
			  }
			  
	 },
    removeItem(index) {
      this.orderList.splice(index, 1);
      uni.showToast({
        title: '已删除',
        icon: 'none'
      });
    },
    completeOrder(index) {
      if (this.orderList[index].status !== 'completed') {
        this.orderList[index].status = 'completed';
        this.orderList[index].statusText = '订单完成';
        uni.showToast({
          title: '订单已标记为完成',
          icon: 'success'
        });
      }
    }
  }
}
</script>

<style lang="scss">
/* 样式变量定义 */
$primary-color: #FF0101;
$text-color: #2D3046;
$text-secondary: #7A8195;
$text-tertiary: #8E949B;
$background-color: #F9F9F9;
$card-bg: #FFFFFF;
$border-radius: 20rpx;
$padding-base: 24rpx;
$padding-sm: 16rpx;
$margin-base: 24rpx;
$font-large: 28rpx;
$font-medium: 26rpx;
$font-small: 20rpx;

// 主容器样式
.order-list-container {
  padding: 22rpx 16rpx;
  background-color:#F7F8FA;
  min-height: 100vh;
  box-sizing: border-box;
  padding-bottom: 120rpx;
}

// 订单项样式
.order-item {
width: 716rpx;
height: 304rpx;
background: #FFFFFF;
border-radius: 28rpx;
  padding: 28rpx 20rpx;
  margin-bottom: 24rpx;
  box-sizing: border-box;
}

// 头部信息样式
.order-header {
  display: flex;

  
  // align-items: flex-start;

  .product-image {
    width: 204rpx;
    height: 204rpx;
    border-radius: 28rpx;
    margin-right: 16rpx;
  }

  .product-info {
    flex: 1;
    display: flex;
    flex-direction: column;

    .info-pr {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .product-name {
        font-weight: 500;
        font-size: 28rpx;
        color: #2D3046;
      }

      .close-btn {
        width: 40rpx;
        height: 40rpx;
        font-size: 36rpx;
        color: $text-secondary;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .product-features {
      font-weight: 400;
      font-size: 22rpx;
      color: #7A8195;
      margin-bottom: 16rpx;
    }

    .installation-video {
      // margin-bottom: 16rpx;
display: flex;
      .video-label {
        font-size: 24rpx;
        color: #7A8195;
      }

      .video-thumbs {
        display: flex;
        gap: 10rpx;

        .video-thumb {
          width: 90rpx;
          height: 90rpx;
          border-radius: 12rpx;
          overflow: hidden;

          .thumb-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
    .completed-ul{
		width: 100%;
		display: flex;
		justify-content: space-between;

		.completed-button{
			width: 148rpx;
			height: 52rpx;
			border-radius: 30rpx;
			border: 1rpx solid #FF0101;
			color: #FF0101;
		}
		
	}

  }
}

// 底部按钮样式
.order-footer {
width: 100%;
// background-color: red;
  display: flex;
  text-align: center;
  justify-content: space-between;
  // line-height: 52rpx;
  // height: 52rpx;
		.completion-time {
			margin-top: 16rpx;
		  font-weight: 400;
		  font-size: $font-small;
		  color: $text-tertiary;
		  
		}
  .order-complete-btn {
    width: 168rpx;
    height: 52rpx;
    background: $primary-color;
    border-radius: 30rpx;
    border: 2rpx solid rgba(255, 1, 1, 0.17);
    color: #FFFFFF;
    font-size: $font-medium;
    line-height: 52rpx;
    text-align: center;
    font-weight: 500;

    &.completed {
      background: #FFECEC;
      color: $primary-color;
    }
  }
}
</style>